<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品细节</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.css"
	rel="stylesheet" type="text/css" media="all">
<link href="${pageContext.request.contextPath}/css/style.css"
	rel="stylesheet" type="text/css" media="all" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.useso.com/css?family=Montserrat:400,700'
	rel='stylesheet' type='text/css'>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/flexslider.css"
	type="text/css" media="screen" />
<link href="${pageContext.request.contextPath}/css/megamenu.css"
	rel="stylesheet" type="text/css" media="all" />
<script src="${pageContext.request.contextPath}/js/menu_jquery.js"></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/etalage.css">
<script
	src="${pageContext.request.contextPath}/js/jquery.easydropdown.js"></script>
<!-- etale -->
<script
	src="${pageContext.request.contextPath}/js/jquery.etalage.min.js"></script>
<script>
	jQuery(document)
			.ready(
					function($) {

						$('#etalage')
								.etalage(
										{
											thumb_image_width : 300,
											thumb_image_height : 400,
											source_image_width : 800,
											source_image_height : 1000,
											show_hint : true,
											click_callback : function(
													image_anchor, instance_id) {
												alert('Callback example:\nYou clicked on an image with the anchor: "'
														+ image_anchor
														+ '"\n(in Etalage instance: "'
														+ instance_id + '")');
											}
										});

					});
</script>
<!-- etale -->

</head>
<body>
	<!-- header -->
	<div class="header">
		<div class="top_bg">
			<div class="container">
				<div class="header_top">
					<div class="logo">
						<a href="${pageContext.request.contextPath}/customer/indexUI.action"><img
							src="${pageContext.request.contextPath}/images/logo.png" alt="" />
						</a>
					</div>
					<br> <br> &nbsp; &nbsp; &nbsp; <span>
						<form action="#">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text"
								style="height:40px;" size="80"> <input type="submit"
								value="搜索" style="height:40px;width:90px">

						</form> </span>
					<div class="top_right">
						<ul>
							<li>${sessionScope.customer.customerName}</li>
							<li><a
								href="${pageContext.request.contextPath}/customer/registerUI.action">免费注册
							</a>
							</li>|
							<li><a
								href="${pageContext.request.contextPath}/link/contact.jsp">联系我们</a>
							</li>|
							<li class="login">
								<div id="loginContainer">
									<a href="#" id="loginButton"><span>登录</span> </a>
									<div id="loginBox">
										<form id="loginForm"
											action="${pageContext.request.contextPath}/customer/customerLogin.action"
											method="post">
											<fieldset id="body">
												<fieldset>
													<label for="email">邮箱地址</label> <input type="text"
														name="customerEmail" id="email">
												</fieldset>
												<fieldset>
													<label for="password">密码</label> <input type="password"
														name="customerPassword" id="password">
												</fieldset>
												<input type="submit" id="login" value="登录"> <label
													for="checkbox"><input type="checkbox" id="checkbox">
													<i>下次自动登录</i> </label>
											</fieldset>
											<span><a href="#">忘记密码?</a> </span>
										</form>
									</div>
								</div></li>
						</ul>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="head-bann">
		<div class="container">
			<div class="head-nav">
				<!-- megamenu -->
				<script type="text/javascript"
					src="${pageContext.request.contextPath }js/megamenu.js"></script>
				<script>
					$(document).ready(function() {
						$(".megamenu").megamenu();
					});
				</script>
				<!-- megamenu -->
				<span class="menu"> </span>
				<ul class="megamenu skyblue">
					<li><a class="color1" href="#">首页</a></li>
					<li class="grid"><a class="color2" href="${pageContext.request.contextPath}/goods/brand.action">电脑办公</a>
						<div class="megapanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4>电脑整机</h4>
										<ul>
											<li><a href="women.html">笔记本</a>
											</li>
											<li><a href="women.html">游戏本</a>
											</li>
											<li><a href="women.html">台式机</a>
											</li>
											<li><a href="women.html">一体机</a>
											</li>
											<li><a href="women.html">服务器</a>
											</li>
											<li><a href="women.html">联想</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>电脑配件</h4>
										<ul>
											<li><a href="women.html">CPU</a>
											</li>
											<li><a href="women.html">SSD硬盘</a>
											</li>
											<li><a href="women.html">显示器</a>
											</li>
											<li><a href="women.html">显卡</a>
											</li>
											<li><a href="women.html">组装电脑</a>
											</li>
											<li><a href="women.html">机箱</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>外设&游戏</h4>
										<ul>
											<li><a href="women.html">键盘</a>
											</li>
											<li><a href="women.html">鼠标</a>
											</li>
											<li><a href="women.html">U盘</a>
											</li>
											<li><a href="women.html">移动硬盘</a>
											</li>
											<li><a href="women.html">游戏设备</a>
											</li>
											<li><a href="women.html">VR设备</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>办公设备</h4>
										<ul>
											<li><a href="women.html">摄影机</a>
											</li>
											<li><a href="women.html">打印机</a>
											</li>
											<li><a href="women.html">点钞机</a>
											</li>
											<li><a href="women.html">碎纸机</a>
											</li>
											<li><a href="women.html">考勤机</a>
											</li>
											<li><a href="women.html">保险柜</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>文具耗材</h4>
										<ul>
											<li><a href="women.html">学生文具</a>
											</li>
											<li><a href="women.html">办公文具</a>
											</li>
											<li><a href="women.html">纸类</a>
											</li>
											<li><a href="women.html">打印耗材</a>
											</li>

										</ul>
									</div>
								</div>

								<div class="col1">
									<div class="h_nav">
										<h4>促销快报</h4>
										<ul>
											<li><a href="women.html">折价商品</a>
											</li>
											<li><a href="women.html">本周热门</a>
											</li>
											<li><a href="women.html">最新商品</a>
											</li>

										</ul>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col2"></div>
								<div class="col1"></div>
								<div class="col1"></div>
								<div class="col1"></div>
								<div class="col1"></div>
							</div>
						</div></li>


					<li><a class="color4" href="${pageContext.request.contextPath}/goods/brand.action">品牌馆</a>
						<div class="megapanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4>联想</h4>
										<ul>
											<li><a href="women.html">ThinkPad New S3</a>
											</li>
											<li><a href="women.html">YOGA5 Pro</a>
											</li>
											<li><a href="women.html">小新 air13 Pro</a>
											</li>
											<li><a href="women.html">拯救者</a>
											</li>
											<li><a href="women.html">天逸310</a>
											</li>
											<li><a href="women.html">710S</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>华硕</h4>
										<ul>
											<li><a href="women.html">U4000UQ</a>
											</li>
											<li><a href="women.html">FX-PRO</a>
											</li>
											<li><a href="women.html">灵耀3</a>
											</li>
											<li><a href="women.html">顽石四代</a>
											</li>
											<li><a href="women.html">玩家国度</a>
											</li>
											<li><a href="women.html">G11飞行堡垒</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>ThinkPad</h4>
										<ul>
											<li><a href="women.html">黑侠E570</a>
											</li>
											<li><a href="women.html">NewS2</a>
											</li>
											<li><a href="women.html">E450</a>
											</li>
											<li><a href="women.html">黑将S5</a>
											</li>
											<li><a href="women.html">E450</a>
											</li>
											<li><a href="women.html">X260</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>微星</h4>
										<ul>
											<li><a href="women.html">GP62</a>
											</li>
											<li><a href="women.html">GL62</a>
											</li>
											<li><a href="women.html">GS73</a>
											</li>

										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>戴尔</h4>
										<ul>
											<li><a href="women.html">灵越</a>
											</li>
											<li><a href="women.html">成就</a>
											</li>
											<li><a href="women.html">7040MT</a>
											</li>
											<li><a href="women.html">一体机</a>
											</li>
											<li><a href="women.html">灵越飞匣</a>
											</li>

										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4>惠普</h4>
										<ul>
											<li><a href="women.html">HP ENVY</a>
											</li>
											<li><a href="women.html">暗影精灵II</a>
											</li>
											<li><a href="women.html">22-b030cn</a>
											</li>
											<li><a href="women.html">24ES</a>
											</li>
											<li><a href="women.html">一体机</a>
											</li>
											<li><a href="women.html">商务本</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col2"></div>
								<div class="col1"></div>
								<div class="col1"></div>
								<div class="col1"></div>
								<div class="col1"></div>
							</div>
						</div></li>
					<li><a class="color5" href="#">游戏部落</a></li>

					<li><a class="color6" href="#">装机大师</a>
					</li>
					<li><a class="color7" href="${pageContext.request.contextPath}/orders/shoppingcarshow.action">购物车</a></li>
					<li><a class="color8" href="#">联系我们</a>
					</li>
					<div class="clearfix"></div>
				</ul>
			</div>
		</div>
	</div>
	<!-- script-for-nav -->
	<script>
		$("span.menu").click(function() {
			$(".head-nav ul").slideToggle(300, function() {
				// Animation complete.
			});
		});
	</script>
	<!-- script-for-nav -->

	<div class="banner1">
		<div class="container"></div>
	</div>
	<!-- header -->
	<!-- details -->
	<div class="details">
		<div class="container">
			<div class="row single">
				<div class="col-md-9">
					<div class="single_left">

						<div class="grid images_3_of_2">
							<ul id="etalage">
								<li><a href="optionallink.html"> <img
										class="etalage_thumb_image"
										src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
										class="img-responsive" /> <img class="etalage_source_image"
										src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
										class="img-responsive" title="" /> </a>
								</li>
								<li><img class="etalage_thumb_image"
									src="${pageContext.request.contextPath}/uploads/default2.jpg"
									class="img-responsive" /> <img class="etalage_source_image"
									src="${pageContext.request.contextPath}/uploads/default2.jpg"
									class="img-responsive" />
								</li>

								<li><img class="etalage_thumb_image"
									src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
									class="img-responsive" /> <img class="etalage_source_image"
									src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
									class="img-responsive" title="" />
								</li>

								<li><img class="etalage_thumb_image"
									src="${pageContext.request.contextPath}/uploads/default.jpg"
									class="img-responsive" /> <img class="etalage_source_image"
									src="${pageContext.request.contextPath}/uploads/default.jpg"
									class="img-responsive" />
								</li>
							</ul>
							<div class="clearfix"></div>
						</div>
						<div class="desc1 span_3_of_2">
							<h3>
								<b>${goodsCustom.goodsBrand}&nbsp;${goodsCustom.goodsName }</b>${goodsCustom.goodsDescription}
							</h3>

							<p>
								￥ ${goodsCustom.goodsPrice } <a href="#">大热优惠</a>
							</p>
							<div class="det_nav">
								<h4>图册</h4>
								<ul>
									<li><a href="#"><img
											src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
											class="img-responsive" alt="" /> </a></li>
									<li><a href="#"><img
											src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
											class="img-responsive" alt="" /> </a></li>
									<li><a href="#"><img
											src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
											class="img-responsive" alt="" /> </a></li>
									<li><a href="#"><img
											src="${goodsCustom.uploadLocation }${goodsCustom.uploadName}"
											class="img-responsive" alt="" /> </a></li>
								</ul>
							</div>
							<div class="det_nav1">
								<h4>
									<b>选择型号</b>
								</h4>
								<div class=" sky-form col col-4">
									<ul>
										<li><label class="checkbox"><input
												type="checkbox" name="checkbox"><i></i>${goodsCustom.goodsDescription}</label>
										</li>
										<li><label class="checkbox"><input
												type="checkbox" name="checkbox"><i></i>加强版&nbsp;${goodsCustom.goodsDescription}</label>
										</li>
										<li><label class="checkbox"><input
												type="checkbox" name="checkbox"><i></i>+100送四件套&nbsp;${goodsCustom.goodsDescription}</label>
										</li>
										<li><label class="checkbox"><input
												type="checkbox" name="checkbox"><i></i>+300送四件套送保修&nbsp;${goodsCustom.goodsDescription}</label>
										</li>
									</ul>
								</div>
							</div>
							<div class="btn_form">
								<a href="${pageContext.request.contextPath}/orders/buy.action?id=${goodsCustom.goodsId}">立即购买</a>
								<a href="${pageContext.request.contextPath}/orders/shoppingcar.action?id=${goodsCustom.goodsId}">加入购物车</a>
							</div>
							<a href="#"><span>联系我们：支持7天无理由退货 </span> </a>

						</div>
						<div class="clearfix"></div>
					</div>
					<div class="single-bottom1">
						<h6>产品细节</h6>
						<p class="prod-desc">${goodsCustom.goodsDescription}</p>
					</div>
					<div class="single-bottom2">
						<h6>相关产品</h6>
						<c:forEach items="${sessionScope.goodsCustomsOnly3 }"
							var="goodsCustomsOnly3" varStatus="status">
							<div class="product">
								<div class="product-desc">
									<div class="product-img">
										<img
											src="${goodsCustomsOnly3.uploadLocation}${goodsCustomsOnly3.uploadName}"
											class="img-responsive " alt="" />
									</div>
									<div class="prod1-desc">
										<h5>
											<a class="product_link" href="#">${goodsCustomsOnly3.goodsName
												}</a>
										</h5>
										<p class="product_descr">${goodsCustomsOnly3.goodsDescription
											}</p>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="product_price">
									<span class="price-access">￥${goodsCustomsOnly3.goodsPrice
										}</span>
									<a href="${pageContext.request.contextPath}/goods/detailGoods.action?id=${goodsCustomsOnly3.goodsId}"><button class="button1" >
										<span>查看详情</span>
									</button></a>
								</div>
								<div class="clearfix"></div>
							</div>
						</c:forEach>
					</div>

				</div>


				<div class="col-md-3 span_1_of_right">
					<section class="sky-form">
					<div class="product_right">
						<h3 class="m_2">搜索</h3>
						<select class="dropdown" tabindex="10"
							data-settings='{"wrapperClass":"metro"}'>
							<option value="0">类型</option>
							<option value="1">笔记本</option>
							<option value="2">台式机</option>
							<option value="3">一体机</option>
							<option value="4">平板</option>
						</select> <label class="me"></label> <select class="dropdown" tabindex="50"
							data-settings='{"wrapperClass":"metro"}'>
							<option value="1">价格</option>
							<option value="2">1,999-2,999</option>
							<option value="3">2,999-3,999</option>
							<option value="4">3,999-4,999</option>
							<option value="5">4,999-5,999</option>
							<option value="6">5,999以上</option>
						</select> <label class="wom"></label> <select class="dropdown" tabindex="8"
							data-settings='{"wrapperClass":"metro"}'>
							<option value="1">品牌</option>
							<option value="2">联想</option>
							<option value="3">华硕</option>
							<option value="4">惠普</option>
							<option value="5">戴尔</option>
						</select> <label class="kid"></label>
						<!-- 	<select class="dropdown" tabindex="8"
							data-settings='{"wrapperClass":"metro"}'>
							<option value="1">平板</option>
							<option value="2">Sub Category1</option>
							<option value="3">Sub Category2</option>
							<option value="4">Sub Category3</option>
						</select>
						
						 <label class="spo"></label> -->
						<input type='submit' value='提交信息' />
					</div>

					</section>

					<div class="sellers">
						<h3 class="m_2">本周热卖</h3>

						<c:forEach items="${sessionScope.goodsCustomsWeekHot4 }"
							var="goodsCustomsWeekHot4" varStatus="status">
							<div class="best">
								<div class="icon">
									<a
										href="${pageContext.request.contextPath}/goods/detailGoods.action?id=${goodsCustomsWeekHot4.goodsId}"><img
										src="${goodsCustomsWeekHot4.uploadLocation}${goodsCustomsWeekHot4.uploadName}"
										class="img-responsive" alt="" /> </a>
								</div>
								<div class="data">
									<h4>
										<a
											href="${pageContext.request.contextPath}/goods/detailGoods.action?id=${goodsCustomsWeekHot4.goodsId}">${goodsCustomsWeekHot4.goodsBrand}${goodsCustomsWeekHot4.goodsName
											}</a>
									</h4>
									<p>￥8999</p>
									<h5>￥${goodsCustomsWeekHot4.goodsPrice }</h5>
								</div>
								<div class="clearfix"></div>
							</div>
						</c:forEach>
					</div>
					<div class="sellers">
						<h3 class="m_2">品牌</h3>
						<div class="tags">
							<ul>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">笔记本</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">游戏本</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">游戏本</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">台式机</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">一体机</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">联想</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">华硕</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">宏碁</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">戴尔</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">全部</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">键盘</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">鼠标</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">U盘</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">移动硬盘</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">游戏设备</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">CPU</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">SSD硬盘</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">显示器</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">显卡</a>
							</li>
							<li><a href="${pageContext.request.contextPath}/goods/brand.action">组装电脑</a>
							</li>
							</ul>
						</div>
					</div>

					<section class="sky-form">
					<div class="sellers">
						<h3 class="m_2">每日推介</h3>
						<section class="slider">
						<div class="flexslider">
							<ul class="slides">
								<c:forEach items="${sessionScope.goodsCustomsDay4}"
									var="goodsCustomsDay4" varStatus="status">
									<li>
										<div class="tittle">
											<img
												src="${goodsCustomsDay4.uploadLocation }${goodsCustomsDay4.uploadName}"
												class="img-responsive" alt="" />
											<h6>${goodsCustomsDay4.goodsBrand
												}${goodsCustomsDay4.goodsName}</h6>
											<p>学霸也为电竞狂</p>
											<p>满1000立减100</p>
											<p>限量发售</p>
											<a class="show1"
												href="${pageContext.request.contextPath}/goods/detailGoods.action?id=${goodsCustomsDay4.goodsId}">立
												即 查 看</a>
										</div></li>
								</c:forEach>
							</ul>
						</div>
						</section>

						<!-- FlexSlider -->
						<script defer
							src="${pageContext.request.contextPath}/js/jquery.flexslider.js"></script>
						<script type="text/javascript">
							$(function() {
								SyntaxHighlighter.all();
							});
							$(window).load(function() {
								$('.flexslider').flexslider({
									animation : "slide",
									start : function(slider) {
										$('body').removeClass('loading');
									}
								});
							});
						</script>
						<!-- FlexSlider -->

					</div>
					</section>


				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- details -->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<p>
				Copyright &copy; 2017.Company name All rights reserved.<a
					target="_blank" href="#">精英大侠;</a>
			</p>
		</div>
	</div>
	<!-- footer -->
	<div style="display:none">
		<script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540'
			language='JavaScript' charset='gb2312'></script>
	</div>
</body>
</html>